import React, {
    Fragment,
    PureComponent
} from 'react';

import {
    View,
    Text,
    Image,
    StyleSheet
} from 'react-native';

import {
    Actions
} from 'react-native-router-flux';

import Ajax from './../../http';
import * as CONST from './../../const';

import {
    Tip,
    File,
    Press,
    Button,
    Dialog,
    Loading
} from './../../components';

interface Props {
    user: any,
    userActions:any
}

interface State {
    path: string
}

import connect from './../../utils/connect';
import userAction from './../../state/actions/user';
import * as userTypes from './../../state/types/user';
import verify_normal from './../../images/verify/verify_normal.png';

@connect([`user`],{
    userActions:userAction
})
class Photo extends PureComponent<Props, State> {
    state = {
        path: ``
    }

    static defaultProps = {
        user:{},
        userActions:{}
    }

    get source() {
        const {
            path
        } = this.state;
        return !!path ? {
            uri: path
        } : verify_normal;
    }

    get userActions() {
        const {
            userActions
        } = this.props;
        return userActions;
    }

    get loginUser() {
        const {
            user
        } = this.props;
        const {
            loginUser
        } = user;
        return loginUser || {};
    }

    get photoVerify() {
        const {
            photoVerify = 0
        } = this.loginUser;
        return photoVerify;
    }

    get photoVerifyName():string {
        switch (this.photoVerify) {
            case -1 :return `Upload`
            case 0 :return `Upload`
            case 1 :return `Verified`
            case 3 :return `Pending...`
            case 4 :return `Pending...`
        }
        return ``;
    }

    get disabled() {
        return this.photoVerify > 0;
    }

    private _onFileChange = async ({path}:any) => {
        this.setState({
            path: path
        })
    }

    private _onSubmit = async () => {
        const {
            path
        } = this.state;

        if (!path) {
            return false
        }

        Loading.show();

        try {
            const {
                id
            } = await Ajax.uploadImage(path) as any;

            const _para = {
                attachIds: [id]
            }

            const message = (
                await this.userActions[
                    userTypes.userVerifyPhoto
                ](_para)
            )

            const _opts = {
                title: `Tip`,
                message: message
            }

            Dialog.alert(_opts).then(Actions.pop)
        }
        catch (e) {
            Tip.warm({
                message: e.message
            })
        }
        Loading.close();
    }

    render() {
        const {
            path
        } = this.state;
        return (
            <View style={styles.container}>
                <View style={styles.upload}>
                    <File onChange={this._onFileChange}>
                        <Press disabled={this.disabled}>
                            <Image
                                source={this.source}
                                style={styles.imageStyle}
                            />
                        </Press>
                    </File>
                </View>
                <Text style={styles.tip}>
                    Take a photo of yourself holding the paper with FWBDate and your username. Make sure we
                    can see your face and username clearly.
                </Text>
                <Button
                    style={styles.submit}
                    onPress={this._onSubmit}
                    title={this.photoVerifyName}
                    disabled={this.disabled || !path}
                />
            </View>
        )
    }
}

export default Photo;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingVertical: 20,
        paddingHorizontal: 16
    },
    title: {
        fontSize: 16,
        color: `#fff`
    },
    desc: {
        paddingBottom: 16
    },
    descText: {
        fontSize: 16,
        color: `#fff`,
        marginTop: 10
    },
    upload: {
        paddingVertical: 45,
        justifyContent: `center`,
        alignItems: `center`
    },
    tip: {
        fontSize: 14,
        color: `#333`,
        lineHeight: 18,
        textAlign: `center`
    },
    submit: {
        width: 168,
        borderWidth: 1,
        marginTop: 60,
        alignSelf: `center`
    },
    verifySuccess: {
        flex: 1,
        paddingTop:70,
        alignItems: `center`
    },
    successText: {
        fontSize: 16,
        color: `#fff`,
        marginTop: 16,
        paddingRight: 10
    },
    imageStyle: {
        width:325 * CONST.rem *.9,
        height:208 * CONST.rem * .9
    }
}) as any;